import React, { memo, useState, useEffect, useRef, useCallback, useMemo } from "react";
import { useSelector, useDispatch, shallowEqual } from "react-redux";
import { View } from '@tarojs/components';
import { TreeSelect } from "@antmjs/vantui";
import Taro from '@tarojs/taro';
import debounce from 'lodash/debounce';
import { updateState } from "@/store/actions/global";
import Authorization from "@/components/Authorization"
import Navbar from "@/components/Navbar"
import tabData from './data.js'
import './index.less'



const Index = () => {
  const { globalData } = useSelector(
    (state) => ({ globalData: state.globalData }),
    shallowEqual
  );
  const { isLogin, navbarHeight } = globalData;
  const dispatch = useDispatch();
  const [activeId, setactiveId] = useState(0);
  const [mainActiveIndex, setMainActiveIndex] = useState(0);
  const [catData, _] = useState(tabData);
  const onClickNav = ({ detail }) => {
    setMainActiveIndex(detail.index);
  }
  const onClickItem = useCallback(
    debounce(({ detail }) => {
      console.log('CLICK', detail);
      if (!isLogin) {
        dispatch(updateState({
          isShowGrant: true
        }))
      } else {
        const url = `/pages/recipeSearch/index?cat=${detail.text}`;
        Taro.navigateTo({
          url
        })
      }
    },
      500,
      {
        leading: true,
        trailing: false,
      }
    ), [isLogin]);


  return (
    <View className='category'>
      <Authorization></Authorization>
      <Navbar title='菜谱分类' ></Navbar>
      <TreeSelect
        items={catData}
        mainActiveIndex={mainActiveIndex} //左侧索引
        activeId={activeId} //右侧选中id
        max='1'
        height={`calc(100vh - ${navbarHeight}px)`}
        onClickNav={onClickNav}
        onClickItem={onClickItem}
      />
    </View>
  )

}

export default memo(Index)

